<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<!--<el-form-item>-->
					<!--<el-input v-model="groupName" placeholder="分组名称"></el-input>-->
				<!--</el-form-item>-->
				<!--<el-form-item>-->
					<!--<el-button type="primary" v-on:click="getUsers">查询</el-button>-->
				<!--</el-form-item>-->
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="groups" highlight-current-row v-loading="listLoading"  style="width: 100%;">
			<el-table-column prop="id" label="分组id" width="200">
			</el-table-column>
			<el-table-column prop="name" label="分组名称" width="200">
			</el-table-column>
			<el-table-column label="操作" min-width="250">
				<template slot-scope="scope">
					<el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
					<!--<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<!--<el-col :span="24" class="toolbar">-->
			<!--<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="15" :total="total" style="float:right;">-->
			<!--</el-pagination>-->
		<!--</el-col>-->

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false" @close="cancelForm">
			<el-form  label-width="80px" >
				<el-form-item label="分组ID" >
					<el-input v-model="editGroupList.id" auto-complete="off" disabled></el-input>
				</el-form-item>
				<el-form-item label="分组名称" >
					<el-input v-model="editGroupList.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-tree
						:data="functions"
						show-checkbox
						node-key="id"
						ref="editTree"
						:default-checked-keys="editKeys"
						:props="defaultProps">
				</el-tree>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="cancelForm">取消</el-button>
				<el-button type="primary" @click="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form  label-width="80px" >
				<el-form-item label="分组ID">
					<el-input v-model="addGroupId" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="分组名称">
					<el-input v-model="addGroup" auto-complete="off"></el-input>
				</el-form-item>
				<el-tree
						:data="functions"
						show-checkbox
						node-key="id"
						ref="tree"
						:default-checked-keys="keys"
						:props="defaultProps">
				</el-tree>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="getCheckedNodes" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>

	export default {
		data() {
			return {
                checkAll: true,
                keys:['SystemConfig','SystemManagement','UserManagement','AgentManagement','ChartStatistics'],
                cities: [],
                isIndeterminate: true,
                groupName:'',
				groups: [],
				total: 0,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列
                functions:[],
                addFunctions:[],

                defaultProps: {
                    children: 'child',
                    label: 'name'
                },
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
                addGroupId:'',
                addGroup:'',
				//编辑界面数据

                editGroupList:{},
                editKeys:[],
				addFormVisible: false,//新增界面是否显示
				addLoading: false,

				//新增界面数据

			}
		},
		methods: {
            cancelForm(){
                this.editFormVisible = false
				location.reload()
			},
            handleCheckAllChange(val) {
                console.log(val)
                // this.checkedCities = val ? this.checkedCities : [];
                this.isIndeterminate = false;
            },

            handleCheckedCitiesChange(value) {
                console.log(value)
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers() {
				this.listLoading = true;
				this.$axios.get('/groups',{},this.global().token).then((res)=>{
				    if (res.status == 200){
				        this.groups = res.data
						this.listLoading = false
					}
				})
                this.$axios.get('/functions',{},this.global().token).then((res)=>{
                    if (res.status == 200){
                        this.functions = res.data
                    }
                })
			},
			//显示编辑界面
			handleEdit: function (row) {
                this.editKeys=[]
				let edit = row.functions
				edit.forEach((val)=>{
				    if (val.parent != ''){
                        this.editKeys.push(val.id)
					}
				})
                this.editFormVisible = true;
                this.editGroupList = row
				console.log(this.editKeys)
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;

			},
			//编辑
			editSubmit: function () {
                let submitTree = this.$refs.editTree.getCheckedNodes(false,true)
				console.log(submitTree)
                submitTree.forEach((val)=>{
                    if (val.child){
                        val.child = ''
                    }
                })
                this.$axios.patch('/group/'+this.editGroupList.id,{
                    id:this.editGroupList.id,
                    name:this.editGroupList.name,
                    functions:submitTree
                },this.global().token).then((res)=>{
                    if (res.status == 200){
                        this.$message({message: '修改分组成功', type: 'success'});
                        this.editFormVisible = false
                        this.getUsers();
                    }else{
                        this.$message({message: res.data, type: 'error'});
					}
                })
			},
            getCheckedNodes() {
                let submitTree = this.$refs.tree.getCheckedNodes(false,true)
                submitTree.forEach((val)=>{
                    if (val.child){
                        val.child = ''
					}
				})

                this.$axios.post('/group',{
                    id:this.addGroupId,
                    name:this.addGroup,
                    functions:submitTree
                },this.global().token).then((res)=>{
                    if (res.status == 200){
                        this.$message({message: '添加分组成功', type: 'success'});
                        this.addFormVisible = false
                        this.getUsers();
                    }else{
                        this.$message({message: res.data, type: 'error'});
                    }
                })
            },

		},
		mounted() {
			this.getUsers();
		}
	}

</script>

<style scoped>

</style>